<!--【原模板博客地址】-->】https://blog.csdn.net/cuk5239/article/details/107698202?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-1-107698202-blog-129385491.235^v43^pc_blog_bottom_relevance_base5&spm=1001.2101.3001.4242.2&utm_relevant_index=4-->
<template>
  <div id="app">
    <ve-calendar
      v-model="selected"
      :height="height"
      :lunar="lunar"
      :event="event"
      :cross-month="crossMonth"
      :off-days="offDays"
      :mode="mode"
      :most-choice="mostChoice"
      @refresh-calendar="refreshC"
      @append-event="appendEvent"
      @click-event="clickEvent"
    >
      <template v-slot:day-event="{ day, popMenu }">
        <div v-if="evenDay.indexOf(day.sDate) >= 0">
          <div style="color:red;" @click="popMenu($event, { day, item })">
            {{ evenDataMap.get(day.sDate) }}
          </div>
        </div>
      </template>
      <template v-slot:day-event-left-menu="{ currentEvent, eventMenuShow }">
        <!-- 这里如果需要调用多重包装的数据，请放到v-if里面 -->
        <div v-if="currentEvent.day">{{ currentEvent.day.sDate }}</div>
        <div class="day-event-menu-item" @click="deleteEvent(currentEvent)">删除事件</div>
        <div class="day-event-menu-item" @click="editEvent(currentEvent)">修改事件</div>
      </template>
      <template v-slot:day-event-right-menu="{currentEvent,eventRightMenuShow}">
        <div v-if="currentEvent.day">{{ currentEvent.day.sDate }}</div>
        <div class="day-event-menu-item" @click="appendEvent(currentEvent.day)">添加事件</div>
        <div class="day-event-menu-item">右键插槽控制菜单2</div>
        <div class="day-event-menu-item">右键插槽控制菜单3</div>
      </template>

    </ve-calendar>
    <div class="demo-div">
      <div>
        <label for="selected">选中的日期array</label>
        <input id="selected" type="text" :value="selected" placeholder="选中上面的日期">
      </div>

      <div>
        <label for="item">给每月2号添加事件</label>
        <input id="item" v-model="item" type="text">
      </div>
      <div>
        <button @click="setOffDays">把选中日期设置为休息日</button>
      </div>

    </div>

  </div>
</template>

<script>
import veCalendar from 've-calendar'

export default {
  name: 'App',
  components: {
    veCalendar
  },
  data() {
    return {
      mode: 'normal',
      item: '去看世界杯',
      // 农历显示
      lunar: true,
      crossMonth: true,
      offDays: [],
      // 最大选择数量
      mostChoice: 1,
      // 事件开关
      event: true,
      activateDate: {
        year: 2024,
        month: 1
      },
      height: '600px',
      month: 6,
      evenDay: [],
      evenDataMap: new Map(),
      selected: []
    }
  },
  mounted() {

  },
  methods: {
    setOffDays() {
      this.offDays = JSON.parse(JSON.stringify(this.selected))
      console.log('setOffDays 休息日：' + this.offDays)
      this.item = '去看世界杯2222' + this.offDays
    },
    refreshC(yearmonth, data) {
      console.log('refreshC Event')
      console.log(yearmonth, data)
    },
    clickEvent(e, data) {
      console.log('触发事件按钮')
      console.log(e, data)
    },
    deleteEvent(currentEvent) {
      console.log(`你打算删除事情${currentEvent.item}`)
      this.evenDataMap.delete(currentEvent.day.sDate)
    },
    editEvent(item) {
      console.log('editEvent')
      console.log(`你打算编辑事件${item}`)
    },
    appendEvent(day) {
      console.log(day)
      this.item = '事件内容：' + day.sDate
      this.evenDay.push(day.sDate)
      this.evenDataMap.set(day.sDate, this.item)
    }
  }
}
</script>

<style>
.demo-div {
  padding: 20px;
  height: 200px;
}

.demo-div div {
  margin-top: 10px;
}
</style>
